<template>
  <div id="app">
    <el-container class="app-out-pannel">
      <el-header class="sys-header">
        <span>长春市海绵城市时空大数据平台</span>
        <div class="zhanghao" @mouseover="showMenu" @mouseleave="hideMenu">
          <router-link to="/login" style="text-decoration: none">
            <el-avatar style="outline: none;" :size="60"
              :src="'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'" />
          </router-link>
        </div>
        <div v-show="menuVisible" class="menu-container" @mouseover="showMenu1" @mouseleave="hideMenu">
          <div class="xinxi">用户名：<br>{{ username }}</div>
          <div class="xinxi">邮箱：<br>{{ email }}</div>
          <div class="xinxi1" @click="handleLogout">退出登录</div>
        </div>
      </el-header>
      <el-container class="app-conton-pannel">
        <el-aside class="sys-menu">
          <el-menu :default-openeds="['']" unique-opened>
            <router-link to="/" style="text-decoration: none">
            <el-menu-item index="1">首页</el-menu-item>
            </router-link>
            <el-menu-item index="2" @click="handleMenuClick1">长春市降水量数据图</el-menu-item>
            <el-menu-item index="3" @click="handleMenuClick2">长春市绿化数据图</el-menu-item>
            <el-menu-item index="4" @click="handleMenuClick3">数据图表化展示</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      menuVisible: false,
      username: '',
      email: '',
    }
  },
  methods: {
    loadUser() {
      const token = localStorage.getItem('token');
      axios.get('http://localhost:3000/api/user', {
        headers: {
          Authorization: 'Bearer ' + token
        },
      }).then(res => {
        if (res.data.success) {
          this.username = res.data.username;
          this.email = res.data.email;
        }
      }).catch(error => {
        console.log(error);
      });
    },
    showMenu() {
      this.menuVisible = true;
      this.loadUser();
    },
    showMenu1() {
      this.menuVisible = true;
    },
    hideMenu() {
      this.menuVisible = false;
    },
    handleLogout() {
      localStorage.removeItem('token');
      this.username = '';
      this.email = '';
      this.$router.push('/');
    }
    ,
    handleMenuClick1() {
      axios.get('http://localhost:3000/api/mapview1', {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
      }).then(res => {
        if (res.data.success) {
          this.$router.push('/mapview1');
        }
      }).catch(error => {
        console.log(error);
        this.$message.error('登录后才可访');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      });
    },
    handleMenuClick2() {
      axios.get('http://localhost:3000/api/mapview2', {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
      }).then(res => {
        if (res.data.success) {
          this.$router.push('/mapview2');
        }
      }).catch(error => {
        console.log(error);
        this.$message.error('登录后才可访');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      });
    },
    handleMenuClick3() {
      axios.get('http://localhost:3000/api/mapview3', {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
      }).then(res => {
        if (res.data.success) {
          this.$router.push('/mapview3');
        }
      }).catch(error => {
        console.log(error);
        this.$message.error('登录后才可访');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      });
    },
  },
};
</script>
  
<style>
html,
body,
#app {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.app-out-pannel,
.app-content-pannel {
  height: 100%;
}

.sys-header {
  height: 80px !important;
  padding: 0px !important;
  background-color: #2d53eb;
  text-align: center;
  color: #f1f2f5;
  font-size: 50px;
}

.sys-menu {
  background-color: #c0c4cc;
}

.zhanghao {
  position: absolute;
  top: 10px;
  right: 45px;
  width: 60px;
  height: 60px;
}

.el-menu-item {
  align-items: center;
  justify-content: center;
  height: 80px !important;
  border: 0.25px solid #c1bfbf;
}

.menu-container {
  position: absolute;
  top: 80px;
  right: 0px;
  width: 150px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
  padding: 0px;

}

.xinxi {
  width: 149.5px;
  height: 49.5px;
  border: 0.25px solid #c1bfbf;
  text-align: center;
  word-wrap: break-word;
  font-size: 15px;
  color: black;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xinxi1 {
  width: 149.5px;
  height: 49.5px;
  border: 0.25px solid #c1bfbf;
  text-align: center;
  word-wrap: break-word;
  font-size: 30px;
  color: black;
}
.el-main{
  padding:0px !important;
}
</style>
  